<template>
  <el-dialog
    title="推广店铺"
    :visible.sync="dialogVisible"
    width="300px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :append-to-body="true"
    :destroy-on-close="true"
    :modal-append-to-body="false"
    :center="true"
  >
    <div class="dialog-content">
      <div class="dialog-subcontent" ref="dialogContent">
        <div>
          <div style="display: flex; align-items: center; justify-content: center; padding-top: 20px">
            <img style="width: 25px; height: 25px; margin-right: 10px" src="@/assets/shop/shop_logo.png" alt="" />
            <div class="dialog-text">{{ appletName }}</div>
          </div>
          <div style="margin-top: 30px; text-align: center">
            <div class="dialog-text">Hi，我已开通线上商城，</div>
            <div class="dialog-text">大家可以来我网店订货哦！</div>
          </div>
          <div style="display: flex; justify-content: center">
            <div style="padding: 15px; background: #fff; margin: 15px; border-radius: 5px;">
              <img style="width: 120px; height: 120px;" :src="base64Image" />
            </div>
          </div>
          <div class="dialog-text">微信/企业微信 扫码分享给客户</div>
          <div style="display: flex; justify-content: center">
            <div class="dialog-btn" @click="saveImage">保存图片发给好友</div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import html2canvas from 'html2canvas'
import { getAction } from '@/api/manage'
export default {
  name: 'DialogShareShop',
  data() {
    return {
      dialogVisible: false,
      appletCode: '',
      appletName: '',
      base64Image: '',
    }
  },
  watch: {
    appletCode(newVal) {
      if (newVal) {
        this.convertImageToBase64(newVal) // 当 appletCode 有值时转换为 Base64
      }
    },
  },
  methods: {
    // 直接转跨域，交给后台转
    convertImageToBase64(url) {
      getAction('sys/getCodeBase64', { url }).then((res) => {
        if (res.success && res.result && res.result.base64String) {
          this.base64Image = 'data:image/png;base64,' + res.result.base64String
        }
      })
    },
    // async convertImageToBase64(url) {
    //   try {
    //     const response = await fetch(url, {
    //       method: 'GET',
    //       headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
    //       mode: 'cors',
    //     })
    //     const blob = await response.blob()
    //     const reader = new FileReader()
    //     reader.onloadend = () => {
    //       this.base64Image = reader.result // 将 Base64 数据存储到 data 中
    //     }
    //     reader.readAsDataURL(blob) // 将 Blob 转换为 Base64
    //   } catch (error) {
    //     console.error('Error converting image to Base64:', error)
    //   }
    // },
    // 保存图片
    saveImage() {
      const element = this.$refs.dialogContent // 获取要保存的元素
      html2canvas(element).then((canvas) => {
        const link = document.createElement('a') // 创建下载链接
        link.href = canvas.toDataURL('image/png') // 获取图像数据
        link.download = '分享商城.png' // 设置下载文件名
        link.click() // 触发下载
      })
    },
    // 关门
    onClose() {
      this.dialogVisible = false
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  margin-top: 30vh !important;
  border-radius: 10px;
}

.dialog-content {
  padding: 5px 25px 25px;
  height: 410px;
}

.dialog-subcontent {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #fc6c6c 0%, #fd3131 100%);
  display: flex;
  justify-content: center;
}

.dialog-text {
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 14px;
  color: #ffffff;
}

.dialog-btn {
  margin-top: 20px;
  width: 120px;
  height: 26px;
  line-height: 26px;
  background: linear-gradient(180deg, #fbfb19 0%, #ff9100 100%);
  box-shadow: 0px 6px 12px 1px rgba(248, 55, 30, 0.2);
  border-radius: 55px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 12px;
  color: #000000;
  text-align: center;
  cursor: pointer;
}
</style>